<script setup lang="ts">
import { ref } from 'vue'
import { get } from '@/utils/service'
import CouponDataComponent from '@/components//CouponDataComponent.vue'
import { showFailToast } from 'vant'
const showSignDialog = ref(false)
const active = ref('all')
const member = ref({})
const couponMember = ref({})
queryMember()
function onClickLeft() {
  window.history.back()
}
function onClickTag(obj: object) {
  active.value = obj.name
}
function queryMember() {
  get('/memberWechatNew/queryMinaUserCenter', {}).then((res) => {
    if (res.code == 0) {
      member.value = res.data
    } else {
      showFailToast('无会员信息')
    }
  })
}
function showCoupon(temp) {
  showSignDialog.value = true
  couponMember.value = temp
}
</script>
<template>
  <van-nav-bar title="我的优惠卷" left-text="返回" left-arrow @click-left="onClickLeft" />
  <van-tabs
    v-model:active="active"
    style="width: 100%"
    color="#c82030"
    title-active-color="#c82030"
    @click-tab="onClickTag"
    type="line"
    line-width="120px"
    border="true"
    sticky
  >
    <van-tab title="可以使用" name="default">
      <CouponDataComponent @sayHello="showCoupon" :active="active"></CouponDataComponent>
    </van-tab>
    <van-tab title="已使用" name="useless">
      <CouponDataComponent @sayHello="showCoupon" :active="active"></CouponDataComponent>
    </van-tab>
    <van-tab title="已失效" name="disabled">
      <CouponDataComponent @sayHello="showCoupon" :active="active"></CouponDataComponent>
    </van-tab>
  </van-tabs>
  <br />
  <van-popup
    closeable
    v-model:show="showSignDialog"
    position="bottom"
    round
    :style="{ height: '60%' }"
  >
    <div class="mainContent" style="padding: 60px 30px">
      <van-cell-group>
        <van-cell title="名称" :value="couponMember.name" />
        <van-cell title="类型" :value="couponMember.typeName" />
        <van-cell
          :title="couponMember.type == 2 ? '抵扣金额' : '折扣'"
          :value="couponMember.moneyOrRabatt + (couponMember.type == 2 ? '元' : '折')"
          value-class="price"
        />
        <van-cell title="有效期" :value="couponMember.timeLimit" />
        <van-cell title="发卷原因" :value="couponMember.reason || '无'" />
      </van-cell-group>
      <van-cell-group border="false">
        <p style="line-height: 200%">规则说明</p>
        <div class="" style="font-size: 14px; color: var(--van-text-color-2)">
          {{ couponMember.description || '无' }}
        </div>
      </van-cell-group>
    </div>
  </van-popup>
</template>
<style>
.price {
  color: var(--main-color);
  font-size: 18px;
  font-weight: 600;
}
</style>
